<?php get_header(); ?>

<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
        <!-- 主内容区 -->
        <main class="flex-1 min-w-0 space-y-6">
            <?php
            if (have_posts()) :
                while (have_posts()) :
                    the_post();
                    ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class('group bg-white rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden border border-gray-100'); ?>>
                        <div class="flex flex-col md:flex-row">
                            <!-- AI 评分区域 -->
                            <div class="hidden md:flex flex-col items-center justify-center px-6 border-r border-gray-100">
                                <div class="relative">
                                    <!-- 圆形进度条背景 -->
                                    <div class="w-16 h-16 rounded-full border-4 border-gray-100"></div>
                                    
                                    <!-- AI 评分数值 -->
                                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                                        <span class="text-lg font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                                            <?php echo ai_content_get_quality_score(); ?>
                                        </span>
                                        <span class="text-[10px] text-gray-400 -mt-0.5">AI 评分</span>
                                    </div>
                                    
                                    <!-- 评分等级标签 -->
                                    <?php 
                                    $score = ai_content_get_quality_score();
                                    $label_class = 'absolute -bottom-2 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded-full text-[10px] font-medium';
                                    if ($score >= 90) {
                                        echo '<span class="' . $label_class . ' bg-green-50 text-green-600">优秀</span>';
                                    } elseif ($score >= 80) {
                                        echo '<span class="' . $label_class . ' bg-blue-50 text-blue-600">良好</span>';
                                    } elseif ($score >= 70) {
                                        echo '<span class="' . $label_class . ' bg-yellow-50 text-yellow-600">一般</span>';
                                    } else {
                                        echo '<span class="' . $label_class . ' bg-gray-50 text-gray-600">待优化</span>';
                                    }
                                    ?>
                                </div>
                                
                                <!-- AI 标签 -->
                                <div class="mt-3 flex flex-wrap gap-1 justify-center">
                                    <?php
                                    $ai_tags = ai_content_get_tags();
                                    if ($ai_tags) : foreach ($ai_tags as $tag) : ?>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium
                                                    bg-blue-50 text-blue-600">
                                            <?php echo esc_html($tag); ?>
                                        </span>
                                    <?php endforeach; endif; ?>
                                </div>
                            </div>

                            <!-- 图片区域 -->
                            <?php if (has_post_thumbnail()) : ?>
                            <div class="md:w-64 md:shrink-0">
                                <a href="<?php echo esc_url(get_permalink()); ?>" class="block aspect-[4/3] overflow-hidden">
                                    <?php the_post_thumbnail('medium', array(
                                        'class' => 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500'
                                    )); ?>
                                </a>
                            </div>
                            <?php endif; ?>

                            <!-- 文章内容区 -->
                            <div class="flex-1 p-6">
                                <!-- 文章标题 -->
                                <h2 class="text-lg font-semibold mb-2 text-gray-900">
                                    <a href="<?php echo esc_url(get_permalink()); ?>" class="hover:text-blue-600 transition-colors">
                                        <?php the_title(); ?>
                                    </a>
                                </h2>

                                <!-- 文章数据指标 -->
                                <div class="flex items-center gap-4 mb-2 text-xs">
                                    <!-- 常规阅读量 -->
                                    <div class="flex items-center text-gray-500">
                                        <i data-lucide="eye" class="w-3.5 h-3.5 mr-1"></i>
                                        <span><?php echo get_post_views(); ?> 阅读</span>
                                    </div>
                                    <!-- AI 速读量 -->
                                    <div class="flex items-center text-blue-600">
                                        <i data-lucide="zap" class="w-3.5 h-3.5 mr-1"></i>
                                        <span><?php echo get_ai_reads(); ?> AI速读</span>
                                    </div>
                                    <!-- 预计阅读时间 -->
                                    <div class="flex items-center text-gray-500">
                                        <i data-lucide="clock" class="w-3.5 h-3.5 mr-1"></i>
                                        <span><?php echo get_post_length(); ?> 分钟</span>
                                    </div>
                                </div>

                                <!-- 文章摘要 -->
                                <div class="prose prose-xs max-w-none text-gray-500 mb-4 line-clamp-2 text-sm leading-relaxed">
                                    <?php the_excerpt(); ?>
                                </div>

                                <!-- 底部信息栏 -->
                                <div class="flex items-center justify-between mt-3">
                                    <!-- 左侧日期、分类和来源 -->
                                    <div class="flex items-center text-xs text-gray-500 space-x-4">
                                        <!-- 日期 -->
                                        <span class="flex items-center">
                                            <i data-lucide="calendar" class="w-3.5 h-3.5 mr-1"></i>
                                            <?php echo get_the_date(); ?>
                                        </span>
                                        
                                        <!-- 分类 -->
                                        <?php
                                        $categories = get_the_category();
                                        if ($categories) : ?>
                                        <span class="flex items-center">
                                            <i data-lucide="folder" class="w-3.5 h-3.5 mr-1"></i>
                                            <?php echo esc_html($categories[0]->name); ?>
                                        </span>
                                        <?php endif; ?>

                                        <!-- 来源网站 -->
                                        <?php 
                                        $source = get_post_meta(get_the_ID(), 'article_source', true);
                                        if ($source) :
                                            $source_info = get_source_info($source);
                                        ?>
                                        <span class="flex items-center">
                                            <span class="inline-flex items-center px-2 py-1 rounded-md text-xs
                                                      <?php echo esc_attr($source_info['classes']); ?>">
                                                <img src="<?php echo esc_url($source_info['icon']); ?>" 
                                                     alt="<?php echo esc_attr($source); ?>" 
                                                     class="w-3.5 h-3.5 mr-1">
                                                <?php echo esc_html($source_info['name']); ?>
                                            </span>
                                        </span>
                                        <?php endif; ?>
                                    </div>

                                    <!-- 右侧操作按钮 -->
                                    <div class="flex items-center gap-2">
                                        <!-- 常规阅读按钮 -->
                                        <a href="<?php echo esc_url(get_permalink()); ?>" 
                                           class="flex items-center gap-1.5 px-3 py-1.5
                                                  bg-gray-50 hover:bg-gray-100
                                                  text-gray-700 text-xs font-medium
                                                  rounded-lg transition-colors">
                                            <i data-lucide="book-open" class="w-3.5 h-3.5"></i>
                                            <span>阅读</span>
                                        </a>

                                        <!-- AI 速读按钮 -->
                                        <button onclick="openAIReader('<?php echo esc_js(get_the_ID()); ?>')"
                                                class="flex items-center gap-1.5 px-3 py-1.5
                                                       bg-blue-50 hover:bg-blue-100
                                                       text-blue-600 text-xs font-medium
                                                       rounded-lg transition-colors">
                                            <i data-lucide="zap" class="w-3.5 h-3.5"></i>
                                            <span>AI速读</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部进度条 -->
                        <div class="h-1 w-full bg-gray-100">
                            <div class="h-full bg-gradient-to-r from-blue-500 to-indigo-600 w-0 
                                      group-hover:w-full transition-all duration-500"></div>
                        </div>
                    </article>
                    <?php
                endwhile;
                
                // 分页导航
                echo '<div class="mt-6 flex justify-center gap-2">';
                the_posts_navigation(array(
                    'prev_text' => '<span class="inline-flex items-center px-4 py-2 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                    <i data-lucide="chevron-left" class="w-4 h-4 mr-1.5"></i>
                                    上一页
                                  </span>',
                    'next_text' => '<span class="inline-flex items-center px-4 py-2 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                    下一页
                                    <i data-lucide="chevron-right" class="w-4 h-4 ml-1.5"></i>
                                  </span>',
                ));
                echo '</div>';
            else :
                ?>
            <div class="text-center py-12">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                    <i data-lucide="file-question" class="w-8 h-8 text-gray-400"></i>
                </div>
                <p class="text-gray-600"><?php esc_html_e('没有找到内容。', 'ai-content'); ?></p>
            </div>
            <?php
            endif;
            ?>
        </main>

        <!-- 侧边栏 -->
        <aside class="w-full lg:w-80 flex-shrink-0">
            <?php get_sidebar(); ?>
        </aside>
    </div>
</div>

<!-- AI 阅读器弹窗 -->
<div id="ai-reader" class="fixed inset-0 bg-black/50 z-50 hidden">
    <div class="absolute inset-4 lg:inset-16 bg-white rounded-2xl shadow-2xl">
        <!-- 弹窗内容将通过 JS 动态加载 -->
    </div>
</div>

<script>
function openAIReader(postId) {
    const reader = document.getElementById('ai-reader');
    reader.classList.remove('hidden');
    // 这里添加加载 AI 内容的逻辑
}

// 初始化图标
lucide.createIcons();
</script>

<?php get_footer(); ?> 